<template>
  <div class="carList">
    <div id="carList">
      <ul id="carList-ul">
        <li
          class="carList-li"
          v-for="(v,k) in cars.slice((currentPage-1)*4,(currentPage)*4)"
          :key="k"
        >
          <div id="carList-li-left">
            <div class="car-img">
              <img :src="getpic1(v.carPic1)" width="100%" height="100%" />
            </div>
            <div id="rentPrice">
              <p>{{v.price}}</p>
              <i>/日均</i>
            </div>
          </div>
          <div id="carList-li-right">
            <div id="carList-li-right-book">
              <p id="p1">{{v.brand}}</p>
              <p id="p2">{{v.carSeries}}</p>
              <div>
                <form action>
                  <button
                    class="btn btn-primary"
                    id="booknow"
                    type="submit"
                    @click="carId=v.carId,getCarId1(v.carId)"
                  >立即预定</button>
                </form>
              </div>
            </div>

            <div id="carList-li-right-details">
              <ul id="carList-li-right-details-ul">
                <li class="li1 el-icon-house">&nbsp;&nbsp;{{v.carDoors }}&nbsp;门</li>
                <li class="li2 el-icon-menu">&nbsp;&nbsp;{{v.carSeatNum}}&nbsp;坐</li>
                <li class="li3 el-icon-bangzhu">&nbsp;&nbsp;{{v.displacement}} &nbsp;T</li>
                <li class="li4 el-icon-full-screen">&nbsp;&nbsp;天窗：{{v.carWin}}</li>
                <li class="li5 el-icon-coin">&nbsp;&nbsp;{{v.carOilNum}}&nbsp;号油</li>
              </ul>
            </div>
          </div>
        </li>
        <!-- <span>brand:{{brand}}</span>
        <br />
        <span>carType:{{carType}}</span>
        <br />
        <span>order:{{order}}</span>
        <br />
        <span>price1:{{price1}}</span>
        <br />
        <span>price2:{{price2}}</span>
        <br />
        <span>displacement1:{{displacement1}}</span>
        <br />
        <span>displacement2:{{displacement2}}</span>-->
        <!-- <button @click="getlocalStroage()">获取数据</button> -->
        <!-- 分页 -->
        <el-pagination
          background
          :page-size="3"
          :pager-count="5"
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :total="allorders"
          @current-change="allorderpageChange"
          :current-page.sync="currentPage"
          style="text-align:center"
        ></el-pagination>
      </ul>
    </div>
  </div>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
  name: "carlistCtt",
  data() {
    return {
      allorders: null,
      carId: "",
      currentPage: 1,
      price1: 0,
      price2: 1000,
      brand: "",
      displacement1: 0,
      displacement2: 5,
      carType: "",
      order: 1,
      cars: [],
      searchitem:""
    };
  },
  inject: ["reload"],
  methods: {
    allorderpageChange(currentPage) {
      this.loading = true;
      this.currentPage = currentPage;
      document.documentElement.scrollTop = 0;
    },
    getCarId1: function(carId) {
      this.$router.push({ name: "cardetail", query: { carId: carId } });
    },
    getpic1(pic) {
      let path = "http://localhost:3000/upload/" + pic;
      return path;
    },
    getlocalStroage() {
      if (this.brand == "" && this.carType != "") {
        console.log("brand空了");
        this.$axios
          .post("http://localhost:3000/carlist/SearchAllKey", {
            type: 2,
            price1: this.price1,
            price2: this.price2,
            brand: this.brand,
            displacement1: this.displacement1,
            displacement2: this.displacement2,
            carType: this.carType,
            order: this.order
          })
          .then(res => {
            console.log("22222", res.data.data);
            this.cars = res.data.data[0];
            this.allorders = this.cars.length;
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      } else if (this.carType == "" && this.brand != "") {
        console.log("carType空了");
        this.$axios
          .post("http://localhost:3000/carlist/SearchAllKey", {
            type: 3,
            price1: this.price1,
            price2: this.price2,
            brand: this.brand,
            displacement1: this.displacement1,
            displacement2: this.displacement2,
            carType: this.carType,
            order: this.order
          })
          .then(res => {
            this.cars = res.data.data[0];
            this.allorders = this.cars.length;
            console.log("33333", res.data.data);
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      } else if (this.carType == "" && this.brand == "") {
        console.log("carType,brand空了");
        this.$axios
          .post("http://localhost:3000/carlist/SearchAllKey", {
            type: 4,
            price1: this.price1,
            price2: this.price2,
            brand: this.brand,
            displacement1: this.displacement1,
            displacement2: this.displacement2,
            carType: this.carType,
            order: this.order
          })
          .then(res => {
            this.cars = res.data.data[0];
            this.allorders = this.cars.length;
            console.log("44444", res.data.data);
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      } else if (this.carType != "" && this.brand != "") {
        console.log("都有");
        this.$axios
          .post("http://localhost:3000/carlist/SearchAllKey", {
            type: 1,
            price1: this.price1,
            price2: this.price2,
            brand: this.brand,
            displacement1: this.displacement1,
            displacement2: this.displacement2,
            carType: this.carType,
            order: this.order
          })
          .then(res => {
            this.cars = res.data.data[0];
            this.allorders = this.cars.length;
            console.log("11111", res.data.data);
          })
          .catch(err => {
            console.log("错误信息：", err);
          });
      }
    },
    searchkey() {
      console.log('搜搜参数',this.searchitem)
      this.$axios
        .post("http://localhost:3000/carlist/SearchkeyWord", {
          // brand: this.searchitem.brand,
          carType: this.searchitem
        })
        .then(res => {
          console.log("搜索查询结果：", res.data.data);
          this.cars = res.data.data[0];
           this.allorders = this.cars.length;
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    }
  },
  mounted() {
    EventBus.$on("reset", reset => {
      console.log("重置");
      this.carType = reset.carType;
      this.order = reset.order;
      this.brand = reset.brand;
      this.price1 = reset.price1;
      this.price2 = reset.price2;
      this.displacement1 = reset.displacement1;
      this.displacement2 = reset.displacement2;
    }),
      EventBus.$on("search", search => {
        this.searchitem=search.carType
        console.log('uiui',this.searchitem)
      }),
      EventBus.$on("carType", carType => {
        this.carType = carType.carType;
      }),
      EventBus.$on("order", order => {
        this.order = order.order;
      }),
      EventBus.$on("brand", brand => {
        this.brand = brand.brand;
      }),
      EventBus.$on("price1", price1 => {
        this.price1 = price1.price1;
      }),
      EventBus.$on("price2", price2 => {
        this.price2 = price2.price2;
      }),
      EventBus.$on("displacement1", displacement1 => {
        this.displacement1 = displacement1.displacement1;
      }),
      EventBus.$on("displacement2", displacement2 => {
        this.displacement2 = displacement2.displacement2;
      }),
      window.addEventListener("getItem", this.getlocalStroage);
  },
  created() {
    this.currentPage = Number(localStorage.getItem("All_cars_Pagination")) || 1;
    this.allorderpageChange(this.currentPage);
    this.getlocalStroage();
  },
  beforeUpdate() {
    localStorage.setItem("All_cars_Pagination", this.currentPage);
  },
  beforeDestroy() {
    localStorage.setItem("All_cars_Pagination", "1");
  },
  watch: {
    brand: function(newbrand, oldbrand) {
      console.log(newbrand, oldbrand);
      this.getlocalStroage();
    },
    carType: function(newcarType, oldcarType) {
      console.log(newcarType, oldcarType);
      this.getlocalStroage();
    },
    order: function(neworder, oldorder) {
      console.log(neworder, oldorder);
      this.getlocalStroage();
    },
    price1: function(newprice1, oldprice1) {
      console.log(newprice1, oldprice1);
      this.getlocalStroage();
    },
    price2: function(newprice2, oldprice2) {
      console.log(newprice2, oldprice2);
      this.getlocalStroage();
    },
    displacement1: function(newdisplacement1, olddisplacement1) {
      console.log(newdisplacement1, olddisplacement1);
      this.getlocalStroage();
    },
    displacement2: function(newdisplacement2, olddisplacement2) {
      console.log(newdisplacement2, olddisplacement2);
      this.getlocalStroage();
    },
    searchitem: function(newsearchitem, oldsearchitem) {
      this.searchkey();
    },
  }
};
</script>
<style scoped>
/* 汽车列表部分 */
#carList {
  width: 100%;
  /* border:1px solid #000;
   */
  /* height: 500px; */
}
#carList #carList-ul {
  list-style: none;
  /* width: 100%; */
  /* border:1px solid #000; */
}
#carList #carList-ul .carList-li {
  margin-top: 15px;
  /* margin-left:-20px;    */
  /* float:left; */
  /* margin:0 auto; */
  box-shadow: 0 0 6px #ccc;
  width: 100%;
  height: 200px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background-color: #fff;
}
/* 列表汽车图片 */
.carList-li #carList-li-left {
  width: 35%;
  height: 200px;
  border-right: 1px solid #ccc;
  /* border-radius:10px; */
  float: left;
}
.carList-li #carList-li-left .car-img {
  width: 80%;
  height: 100px;
  margin: 0 auto;
  margin-top: 45px;
  /* border: 1px solid #000; */
}
.car-img img {
  /* max-width: 150%;
  max-height: 150%; */
  width: 200px;
  height: 100px;
  margin-left: 15px;
  /* margin-left:30%; */
  /* border:1px solid #000; */
  object-fit: cover;
}
/* .car-img img:hover {
  position: relative;
  animation: mymove 4s infinite;
  -webkit-animation: mymove 4s infinite;
} */
@keyframes mymove {
  0% {
    left: 0px;
  }
  50% {
    left: 40px;
  }
  100% {
    left: 0px;
  }
}
#rentPrice {
  /* border:1px solid #000; */
  width: 150px;
  height: 50px;
  /* margin:0 auto; */
  margin-left: 56px;
}
#rentPrice p {
  float: left;
  /* margin-left:50px;    */
  /* margin:0 auto; */
  /* padding-left:50px; */
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: end;
  font-weight: 700;
  color: rgb(252, 227, 2);
  font-size: 20px;
  /* border:1px solid #000; */
}
#rentPrice i {
  margin-left: 50px;
  /* margin-top:10px; */
  /* padding-left:80px; */
  width: 80px;
  height: 30px;
  line-height: 30px;
  display: block;
  text-align: start;
  font-size: 12px;
  /* border:1px solid #000; */
}
.carList-li #carList-li-right {
  width: 64.5%;
  height: 200px;
  /* border:1px solid #ccc; */
  /* border-radius:10px; */
  float: right;
  /* margin-left:0px;     */
}
#carList-li-right-book {
  /* position:relative; */
  width: 100%;
  height: 60%;
  border-bottom: 1px solid #ccc;
}
#carList-li-right-book #p1 {
  /* float:right; */
  /* margin-bottom:10px; */
  margin-left: 0;
  /* margin-top:20px; */
  /* padding-top:30px; */
  font-size: 17px;
  font-weight: 700;
  width: 169px;
  height: 50px;
  line-height: 100px;
  text-align: center;
  /* border:1px solid #000;    */
}
#carList-li-right-book #p2 {
  margin-left: 0;
  /* margin-top:30px; */
  font-size: 15px;
  width: 169px;
  height: 30px;
  line-height: 30px;
  color: #666;
  text-align: center;
  /* border:1px solid #000;   */
}
/* #carList-li-right-book div{
    width: 150px;
    height: 150px;
    border:1px solid #000;
} */
#carList-li-right-book div #booknow {
  /* position: absolute; */
  float: right;
  margin-right: 50px;
  margin-top: -60px;
  width: 110px;
  height: 40px;
  line-height: 10px;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #007bff;
  color: #fff;
}
#carList-li-right-book #booknow:hover {
  background-color: #000;
}
#carList-li-right-details {
  width: 100%;
  height: 40%;
}
#carList-li-right-details-ul {
  /* width: 100%; */
  list-style: none;
}
#carList-li-right-details-ul li {
  float: left;
  /* width: 169px;
    height: 37px; */
  width: 33.3333%;
  height: 50%;
  line-height: 37px;
  /* text-align:center; */
  /* margin-left:px; */
  color: #666;
  border: 1px solid #eee;
}
#carList-li-right-details-ul li:hover {
  color: #007bff;
}
#carList #carList-ul .carList-li:hover {
  border: 1.5px solid #007bff;
  background-color: #f9f9f9;
  box-sizing: inherit;
  /* margin-top:8.5px; */
}

/* #carList-li-right-details-ul li:hover{
    
} */
/* 取消汽车列表里的配置详细信息的边框  */
#carList-li-right-details-ul .li1 {
  border-top: none;
  border-left: none;
}
#carList-li-right-details-ul .li2 {
  border-top: none;
  border-left: none;
}
#carList-li-right-details-ul .li3 {
  border-top: none;
  border-left: none;
  border-right: none;
}
#carList-li-right-details-ul .li4 {
  border-top: none;
  border-left: none;
  border-bottom: none;
}
#carList-li-right-details-ul .li5 {
  border-top: none;
  border-left: none;
  border-bottom: none;
}
@media (min-width: 992px) and (max-width: 1200px) {
  #rentPrice p {
    margin-left: -30px;
  }
  .car-img img {
    margin-left: -10px;
  }
  @keyframes mymove {
    0% {
      left: 0px;
    }
    50% {
      left: 15px;
    }
    100% {
      left: 0px;
    }
  }
}
@media (max-width: 768px) {
  #rentPrice {
    margin: 0 auto;
    /* margin-right:10px; */
  }
  #rentPrice i {
    display: none;
  }
  #rentPrice p {
    text-align: start;
    margin-left: 37px;
  }
  #booknow {
    margin-left: 40px;
  }
  .container {
    width: 100%;
  }
  .carList-li {
    width: 100%;
  }
  #carList-li-right-details-ul .li4 {
    width: 50%;
  }
  #carList-li-right-book #p1 {
    text-align: start;
    margin-left: 10px;
  }
  #carList-li-right-book #p2 {
    text-align: start;
    margin-left: 12px;
  }
  .car-img img {
    margin-left: 0px;
    margin-top: 10px;
    margin-left: -10px;
    width: 150px;
    height: 80px;
  }
  @keyframes mymove {
    0% {
      left: 0px;
    }
    50% {
      left: 0px;
    }
    100% {
      left: 0px;
    }
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  #rentPrice {
    margin-left: 1px;
  }
  #rentPrice p {
    margin-left: -20px;
  }
  .car-img img {
    margin-top: 10px;
    margin-left: -5px;
    width: 130px;
    height: 70px;
  }
  #booknow {
    /* margin-left:-100px; */
    border: 1px solid #000;
    /* float:right; */
  }
  @keyframes mymove {
    0% {
      left: 0px;
    }
    50% {
      left: 0px;
    }
    100% {
      left: 0px;
    }
  }
}
</style>